<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Poster</title>
    <link rel="stylesheet" href="https://css2020.yixuan.net/2020css/yx2020/css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/style_2022.css?v=1">
    <script src="https://css2020.yixuan.net/2020css/yx2020/js/jquery.js?v=2"></script>
    <style>
        .mother_poster{
            overflow: hidden;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.6);
            position: fixed;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            z-index: 9999;
            flex-direction:column;
        }
        .mother_poster .box{
            width: 79vw;
            margin-bottom: 1.80rem;
            display: flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            position: fixed;
            max-height: 72vh;
            overflow: hidden;
        }
        .mother_poster .box img{
            width: 100%;
        }
        .mother_poster .bt-list{
            width: 100vw;
            display: flex;
            flex-direction: row;
            justify-content:center;
            align-items: center;
            position: fixed;
            bottom: 0;
            height: 1.80rem;
            background: #f7f7f7;
            border-top-right-radius:.40rem !important;
            border-top-left-radius:.40rem !important;
        }
        .mother_poster button{
            width: 33.33% !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            font-size: .20rem;
            font-weight: bold;
            color: #353943;
            bottom: 0;
            border-radius: 0;
            padding: 0;
            padding-top: 1vh;
        }
        .mother_poster .bt1{
            border-top-left-radius:.40rem !important;
        }
        .mother_poster .bt3{
            border-top-right-radius:.40rem !important;
        }
        .mother_poster .img{
            width: .88rem;
            height: .88rem;
            border-radius: .88rem;
            background-color: #f1f1f1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .mother_poster .btn_img{
            width: .45rem;
        }

        .mother_poster .button text{
            width: 100%;
            white-space: pre-wrap;
            line-height: .50rem;
            color: #282828;
            font-size: .20rem;
        }
        .mother_poster .mt_bottom{
            height: 1.08rem;
            background: #000000;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
        }
        .mother_poster .mt_bottom img{
            width: .85rem;
            height: .85rem;
            border-radius: .85rem;
            margin-right: .20rem;
        }
        .mother_poster .mt_bottom .f{
            font-size: .33rem;
        }
        .mother_poster .mt_bottom .ff{
            font-size: .24rem;
        }
        .poster{
            background: rgba(0,0,0,0.8);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: fixed;
            z-index: 9999;
        }
        .poster .content{
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: .20rem .20rem 0 0;
            overflow: hidden;
        }
        .poster .content .close{
            width: .36rem;
            height: .36rem;
            position: absolute;
            right: .23rem;
            top: .21rem;
            z-index: 1;
        }
        .poster .content .head{
            background: #6b36d6;
            height: 1.18rem;
            line-height: 1.18rem;
            color: #ffffff;
            font-size: .58rem;
            padding-left: .80rem;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .poster .content .head img{
            position: absolute;
            right: .82rem;
            top: .14rem;
            width: 1.06rem;
            height: .87rem;
        }
        .poster .content .head .top_img{
            width: 5.70rem;
            height: .81rem;
            margin: 0 auto;
        }
        .poster .content .head text{
            color: #fff100;
        }
        .poster .content .detail{
            display: flex;
            justify-content: flex-start;
            background: #ffffff;
            padding-top: .20rem;
        }
        .poster .content .detail .avater{
            width: .76rem;
            height: .76rem;
            border-radius: .10rem;
            margin-right: .20rem;
            margin-left: .20rem;
        }
        .poster .content .detail .detail_right{
            width: 6.00rem;
        }
        .poster .content .detail .detail_right .name{
            display: block;
            color: #536690;
            line-height: .60rem;
        }
        .poster .content .detail .detail_right .detail_txt{
            line-height: .42rem;
            font-size: .28rem;
        }
        .poster .content .detail .detail_right .poster_img{
            width: 2.60rem;
            height: 4.10rem;
            display: block;
            margin-top: .10rem;
        }
        .poster .content .detail .detail_right .time{
            color: #666666;
            font-size: .22rem;
            display: block;
            margin-top: .20rem;
            position: relative;
        }
        .poster .content .detail .detail_right .btn{
            width: 5.03rem;
            height: .83rem;
            background: url(https://dpy01cdn.yixuan.net/imgs/2/2021/09/o7A8lsRLLCl1gM7CML7br7GRGl5E7i.png) no-repeat center;
            background-size: 5.03rem .83rem;
            text-align: center;
            line-height: .83rem;
            font-size: .35rem;
            border-radius: .83rem;
            margin-top: .35rem;
            margin-left: 0.05rem;
            padding: 0;
        }
        .poster .content .detail .detail_right .dots_btn{
            position: absolute;
            right: 0;
            bottom: 0;
            width: .62rem;
            height: .42rem;
            background: #f8f8f8;
            color: #4f6082;
            font-weight: bold;
            text-align: center;
            line-height: .42rem;
            border-radius: 0.06rem;
        }
        .poster .content .bottom{
            background: #ffffff;
            padding-top: .28rem;
        }
        .poster .content .bottom .btn_box{
            background: #282828;
            border-radius: .30rem .30rem 0 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #ffffff;
            padding: .14rem 0;
        }
        .poster .content .bottom .btn{
            height: .93rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: .24rem;
            padding-left: .40rem;
            border-left: 0.03rem solid #ffffff;
        }
        .poster .content .bottom .btn:first-child{
            border: none;
        }
        .poster .content .bottom .btn text{
            display: block;
            font-size: .25rem;
            width: 1.10rem;
        }
        .poster .content .bottom .btn .wid130{
            width: 1.30rem;
        }
        .poster .content .bottom .btn img{
            width: .43rem;
            height: .43rem;
            display: block;
        }
        .manghe .content .head{
            border-radius: .60rem .60rem 0 0;
        }
        .manghe .content{
            overflow: visible;
        }
        .manghe .content .head .top_img{
            top: -0.11rem;
            left: .25rem;
            width: 6.26rem;
            height: 1.51rem;
        }
        .manghe .content .close{
            width: .53rem;
            height: .53rem;
            right: 0.08rem;
            top: 0;
        }
        .manghe .content .bottom .btn_box{
            padding: 0;
        }
        .manghe .content .bottom .btn{
            padding: .14rem 0.08rem;
            width: 100%;
            border: none;
            height: 1.12rem;
        }
        .manghe .content .bottom .btn text{
            font-size: .37rem;
            width: 1.60rem;
            line-height: .39rem;
        }
        .manghe .content .bottom .btn:nth-child(3) text{
            font-size: .37rem;
            width: 1.88rem;
        }
        .manghe .content .bottom .btn:nth-child(1){
            background-color: #0023a1;
        }
        .manghe .content .bottom .btn:nth-child(2){
            background-color: #000000;
        }
        .manghe .content .bottom .btn:nth-child(3){
            background-image: url(https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/mh_share_btn.png);
            background-size: 100% 100%;
            color: #000000;
        }
        .manghe .content .bottom .btn .num1{
            width: .12rem;
            height: .85rem;
        }
        .manghe .content .bottom .btn .num2{
            width: .48rem;
            height: .86rem;
        }
        .alert-mask {
            width: 100%;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .closeBtn {
            position: absolute;
            display: block;
            z-index: 4;
            top: -0.58rem;
            background: url(https://css2020.yixuan.net/2020css/yx2020/imgs/closebtn2.png) center no-repeat;
            width: .45rem;
            height: .45rem;
            background-size: 100% 100%;
            right: .10rem;
        }

        .share {
            z-index: 9999999999990;
            position: fixed;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 70%;
        }

        .sharTit {
            color: #fff;
            background: #ec1f1a;
            line-height: 1.5;
            padding: 5px 0;
            font-size: .24rem;
            text-align: center;
        }
        .sharTit .t2{
            line-height: 2;
            border-radius: 4px;
            font-weight: 700;
            font-size: 17px;
            color:#333
        }

        .share img {
            display: block;
            width: 100%;
        }

        .share-modal {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.0);
            z-index: 9999;
            display: none;
        }

        .share-modal .share-modal-body {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #f2f2f2;
            padding-top: .60rem;
            transform: translateY(100%);
            transition: transform 250ms;
        }

        .share-modal.active {
            display: block;
            /*background: rgba(0,0,0,.6);*/
            background: rgba(0,0,0,.5);
        }

        .share-modal.active .share-modal-body {
            transform: translateY(0);
        }

        .share-modal .share-bottom {
            text-align: center;
            font-size: 9pt;
            margin: 0;
            padding: 0;
            margin-bottom: .60rem;
            line-height: inherit;
            border: none;
            background: none;
            color: inherit;
            font-family: inherit;
            /* width: auto; */
            font-weight: 500;
        }

        .share-modal .share-bottom:after {
            display: none;
        }

        .share-modal .share-bottom cover-img,.share-modal .share-bottom img {
            width: 1.20rem;
            height: 1.20rem;
            margin-bottom: .12rem;
            border-radius: 9.99rem;
            border: 0.01rem solid #eee;
        }

        .share-modal .share-modal-close {
            background: #fff;
            height: 1.00rem;
            border-top: 0.01rem solid #eee;
        }

        .flex-row {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            flex-direction: row;

        }
        .flex-x-center {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;

        }

    </style>

</head>
<body>
<!-- 盲盒的海报 暂时 用display:none;隐藏 -->
<div class="poster manghe" >
    <div class="poster" >
        <div class="content" catchtap="stop">
            <img class="close" src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/close.png" />


            <div class="head">
                <img class="top_img" src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/mh_share_top.png"/>
            </div>
            <div class="detail">
                <img class="avater" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4D7M2Y6w9T4R3xfwQ1xhLAVRBBlx4Aia688hUN6WDcSxHBBVT5EkXOEQJjiaBbY2MMCIQicdrb4AsOw/132"/>
                <div class="detail_right">
                    <text class="name">6666</text>
                    <div class="detail_txt">
                        <div class="emojiTpl">
                            <text id="poster_txt">啦啦啦啦啦啦啦啦</text>
                        </div>
                    </div>
                    <img class="poster_img" style="pointer-events: auto;" src="https://img2020.yixuansoft.cn/images/poster/2022-08/vr18916/b64a5419dfeba5779cc5bcf9b4f9f3c0.jpg/99.jpg" mode="heightFix"/>
                    <text class="time">5分钟前<text class="dots_btn">• •</text></text>
                    <button class="btn" style="background: #0023a1;color:#ffffff;border: none;" >长按上方图片，保存海报</button>
                </div>
            </div>
            <div class="bottom">
                <div class="btn_box">
                    <div class="btn">
                        <text>完成两步即可发圈</text>
                        <img src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/mh_share01.png"/>
                    </div>
                    <div class="btn" onclick="copyTXT()">
                        <img src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/num1.png" class="num1"/>
                        <text>一键复制发圈配文</text>
                        <img src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/mh_share01.png"/>
                    </div>
                    <div class="btn" >
                        <img src="https://css2020.yixuan.net/2020css/mystery_boxes_feichi/images/num2.png" class="num2"/>
                        <text class="wid130">长按海报<text class="wid130">保存到相册</text></text>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="poster">
    <div class="poster" >
        <div class="content">
            <img class="close" src="https://css2020.yixuan.net/2020css/yx2020/images/share04.png" />

            <div class="head" style="background-color:#ec1f1a;">
                <img class="top_img" src="http://img2020.yixuansoft.cn/images/2/2022/08/RAA5HeX92AvZy5sqaNcruE0xA8xHaZ.jpg/99.jpg"/>
            </div>
            <div class="detail">
                <img class="avater" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4D7M2Y6w9T4R3xfwQ1xhLAVRBBlx4Aia688hUN6WDcSxHBBVT5EkXOEQJjiaBbY2MMCIQicdrb4AsOw/132"/>
                <div class="detail_right" id="detail_right">
                    <text class="name">6666</text>
                    <div class="detail_txt"">
                    <div class="emojiTpl">
                        <text id="poster_txt1" onclick="copyTXT()">啦啦啦啦啦啦啦啦</text>
                    </div>
                </div>
                <img id="postImg" style="pointer-events: auto;" class="poster_img" data-src="https://img2020.yixuansoft.cn/images/poster/2022-08/vr18916/b64a5419dfeba5779cc5bcf9b4f9f3c0.jpg/99.jpg" src="http://img2020.yixuansoft.cn/images/2/2022/06/cL28Gf40l4Y8nczZfgfLGGnmGmGcmc.jpg/99.jpg" mode="heightFix" alt="图片"/>
                <text class="time">5分钟前<text class="dots_btn">• •</text></text>
                <button class="btn" style="background: #ec1f1a;color:#ffffff;border: none;" >长按上方图片 保存海报</button>
            </div>
            <!-- <div id="canvas__image"></div> -->
        </div>
        <div class="bottom">
            <div class="btn_box">
                <div class="btn">
                    <text>完成两步即可发圈</text>
                    <img src="https://css2020.yixuan.net/2020css/yx2020/images/share01.png"/>
                </div>
                <div class="btn" onclick="copyTXT()">
                    <text>一键复制发圈配文</text>
                    <img src="https://css2020.yixuan.net/2020css/yx2020/images/share02.png"/>
                </div>
                <div class="btn"onclick="saveImg()" >
                    <text class="wid130">长按海报<text class="wid130">保存到相册</text></text>
                    <img src="https://css2020.yixuan.net/2020css/yx2020/images/share03.png" />
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://css2020.yixuan.net/2020css/plugin/lottery/js/layer/layer.js"></script>
<script>
    function copyTXT() {
        try {
            let range = document.createRange();
            range.selectNode(document.getElementById("poster_txt"));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            layer.msg('复制成功');
        } catch (e) {
            layer.msg('复制失败');
        }
    }
    // 初始化rem
    new function (){
        var _self = this;
        _self.width = 768;
        _self.fontSize = 100;
        _self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.32?0.32:p;};
        _self.changePage = function(){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
        }
        _self.changePage();
        window.addEventListener('resize',function(){_self.changePage();},false);
    };
</script>
</body>
</html>